 var data=[
      {id:1,author:"Pete Hunt",text:"This is one comment"},
      {id:2,author:"Jordan Walke",text:"This is *another* comment"}
    ];

    var Comment =React.createClass({
      rawMarkUp:function(){
          var md=new Remarkable();
          var rawMarkup=md.render(this.props.children.toString()); 
          return {__html:rawMarkup};
        },
      render:function(){
        return (
          <div className="comment">
            <h2 className="commentAuthor">
            {this.props.author}
            </h2>
            <span dangerouslySetInnerHTML={this.rawMarkUp()} />
          </div>
          );
      }
    });     

      var CommentList=React.createClass({
        render:function(){
          var commentNodes=this.props.data.map(function(comment){
            return (
              <Comment author={comment.author} key={comment.id} >
                {comment.text}
              </Comment>
              );
          });
          return (
              <div className="commentList">
                {commentNodes}
              </div>
            );
        }
      });

      var CommentForm=React.createClass({
        render:function(){
          return (
            <div className="CommentForm">
              Hello, world! I am a CommentForm.
            </div>
            );
        }
      });

      var CommentBox=React.createClass({
        getInitialState:function(){
          return {data:[]};
        },
        componentDidMount:function(){
          //this.setState(data);
          
          $.ajax({
            url:this.props.url,
            dataType:"json",
            cache:false,
            success:function(data){
              this.setState(data);
            }.bind(this),
            error:function(xhr,status,err){
              console.error(this.props.url,status,err.toString());
            }.bind(this)
          });
          
        },
        render:function(){
        return (
          <div className="commentBox">
            <h1>Comments</h1>
            <CommentList data={this.state.data}/>
            <CommentForm />
          </div>
        );
        }

      });

      ReactDOM.render(
        /*<CommentBox data={data}/>,*/
        <CommentBox url="/api/comments"/>,
        document.getElementById("content")
      );